let infor=document.querySelector("#infor");
let nav=document.querySelector("#nav");
// let pages=document.querySelector("#pages");
let page=document.querySelector("#page");
let pre=document.querySelector("#pre");
let next=document.querySelector("#next");

// 获取地址栏参数
function getUrlParams() {
    let href = location.href; //获取浏览器的地址
    let regExp = /.+\?(.+)/
    let param = regExp.exec(href) //匹配?后面的参数
    if (!param) {
        console.log('没有query参数');
        return
    }
    param = param[1]
        // console.log(param);
        // console.log(decodeURI(param));解码URI的参数编码
    let paramArr = param.split("&"); //多个参数以"&"切割 ?name=李雷&age=30
    // console.log(paramArr); //["name=李雷","age=30"]
    let query = {} //声明一个对象
    paramArr.forEach(item => {
        itemArr = item.split("=");
        // console.log(itemArr);
        query[itemArr[0]] = decodeURI(itemArr[1])
    })

    return query
}
let query = getUrlParams();

// 渲染导航栏
fetch(`http://chst.vip:1234/api/getcategorybyid?categoryid=${query.categoryid}`)
.then(body => body.json())
.then(res => {
    // console.log(res);
    let html="";
    res.result.forEach(itme => {
        html += `<a href="../pages/index.html">首页></a>
        <a href="../pages/category.html">全部分类></a>
        <a href="" class="title">${itme.category}</a>
        <a href="">筛选</a>`
})
nav.innerHTML = html;
})

// 渲染产品信息
fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${query.categoryid}&pageid=${query.pageid}`)
.then(body => body.json())
.then(res=>{
    // console.log(res);
    let num = Math.floor(res.totalCount / res.pagesize);
    page.innerHTML=`${Number(query.pageid)}/${num}`;
    let html="";
    // 商品信息渲染
    res.result.forEach(function(item,index){
        html+=`
        <ul class="mes">
                <li>
                <a href="../pages/productlist.html?categoryid=${item.categoryId}&productid=${item.productId}" class="lianjie">
                <div class="mes-left">
                    <p>${item.productImg}</p>
                </div>
                <div class="mes-right">
                    <h4>${item.productName}</h4>
                    <p>${item.productPrice}</p>
                    <span>${item.productQuote}</span>
                    <i>${item.productCom}</i>   
                </div>
                </a>
                </li>
                </ul>`
    })
    infor.innerHTML=html;
    // 上一页点击事件
    pre.onclick=function() {
        // console.log(Number(query.pageid));
        // console.log(query.categoryid);
        if (query.pageid <= 1) {
            location.href = `/src/pages/bijia.html?pageid=${Number(query.pageid)}&categoryid=${query.categoryid}`;
        } else {
            location.href = `/src/pages/bijia.html?pageid=${Number(query.pageid)-1}&categoryid=${query.categoryid}`;
        }
    };
    // 下一页点击事件
    next.onclick =function() {
        // console.log(Number(query.pageid));
        // console.log(query.categoryid);
        if (query.pageid >= num) {
            location.href = `/src/pages/bijia.html?pageid=${Number(query.pageid)}&categoryid=${query.categoryid}`;
        } else {
            location.href = `/src/pages/bijia.html?pageid=${Number(query.pageid)+1}&categoryid=${query.categoryid}`;
            }
    };
}) 